<template>
  <div class="commonBoxmp">
    <TableV2
      class="flex1"
      ref="tableV2Ref"
      :isInit="true"
      :apiFunction="list"
      selection
      :columns="state.columnData"
    >
      <template #operation>
        <el-table-column label="操作" fixed="right" width="160px" align="left">
          <template #default="scope">
            <el-link type="primary" @click="handleForceLogout(scope.row)"
              >强退</el-link
            >
          </template>
        </el-table-column>
      </template>
    </TableV2>
  </div>
</template>

<script setup lang="tsx">
import { ref, reactive, getCurrentInstance, onMounted, nextTick } from "vue";
import { useRouter, useRoute } from "vue-router";
import Column from "/@ts/components/table/Column";
import selectDict from "/@/components/selectDict/index.vue";
import DictTag from "/@/components/DictTag/index.vue";
import { ElMessage, ElMessageBox, FormInstance } from "element-plus";
import { list, forceLogout } from "/@ts/axios/urlApi/monitor/online";
import formatTool from "/@ts/hooks/format";
import { routerPush } from "/@ts/hooks/route";
const router = useRouter();
const route = useRoute();
const { parseTime, addDateRange, getDict, selectDictLabel } = formatTool();

const typeFormat = (row: any, column: any) => {
  return selectDictLabel(dict.sys_oper_type, row.businessType);
};
const state: any = reactive({
  // 表格基础配置 start
  form: {},
  title: "",
  rules: {
    postName: [
      { required: true, message: "岗位名称不能为空", trigger: "blur" },
    ],
    postCode: [
      { required: true, message: "岗位编码不能为空", trigger: "blur" },
    ],
    postSort: [
      { required: true, message: "岗位顺序不能为空", trigger: "blur" },
    ],
  },
  dateRange: [], //时间范围筛选

  height: 0,
  tableData: [],
  columnData: [
    {
      label: "会话编号",
      prop: "tokenId",
      visible: true,
    },
    {
      label: "登录名称",
      prop: "userName",
      visible: true,
    },
    {
      label: "部门名称",
      prop: "deptName",
      visible: true,
    },
    {
      label: "主机",
      visible: true,
      prop: "ipaddr",
    },
    {
      label: "登录地点",
      visible: true,
      prop: "loginLocation",
    },
    {
      label: "浏览器",
      visible: true,
      prop: "browser",
    },
    {
      label: "操作系统",
      prop: "os",
      visible: true,
    },
    {
      label: "登录日期",
      prop: "loginTime",
      visible: true,
    },
  ],
  loading: false,
  // 表格基础配置 end
});
// 表格基础配置 start
const pageInfo = reactive({
  currentPage: 1,
  total: 10,
  pageSize: 10,
  pageSizes: [10, 20, 30, 40],
  layout: "total, prev, pager, next,sizes",
});
let queryFormInit = {
  pageNum: 1,
  pageSize: 10,
};
const queryParams: any = reactive(JSON.parse(JSON.stringify(queryFormInit)));

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNum = 1;
  getList();
};
const resetQuery = () => {
  // 将对象的属性复制为初始值
  Object.assign(queryParams, queryFormInit);
  handleQuery();
};

/** 修改按钮操作 */
const handleForceLogout = (row: any) => {
  const tokenId = row.tokenId;
  ElMessageBox.confirm('是否确认强退名称为"' + row.userName + '"的用户？')
    .then(function () {
      return forceLogout(tokenId);
    })
    .then(() => {
      ElMessage.success("删除成功");
      getList();
    })
    .catch(function () {});
};

// 表格基础配置 end
//查询用户列表
const getList = () => {
  state.loading = true;
  queryParams.pageNum = pageInfo.currentPage;
  queryParams.pageSize = pageInfo.pageSize;
  list(addDateRange(queryParams, state.dateRange)).then((response: any) => {
    state.tableData = response.rows;
    pageInfo.total = response.total;
    state.loading = false;
  });
};
const handleDetail = (tokenId: any) => {
  routerPush({
    path: "/system/dict-data/index/" + tokenId,
  });
};
</script>

<style scoped lang="scss"></style>
